<template>
  <div class="app_content_container">
    <Breadcrumb :items="[{ label: 'sss', path: 'sssssss' }, name]" />
    <div class="app_content_box">
      <Tabs
        v-model="activeKey"
        style="padding: 0 16px"
        :list="tabList"
        @tabChange="tabChange"
      >
      </Tabs>
      <component :is="componentName" :id="id"></component>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();
const { id } = route.params;
const { name, tab } = route.query;
const componentName = ref(null);
const props = defineProps({
  tabList: {
    type: Array,
    default: () => [],
  },
  BreadcrumbInfo: {
    type: Array,
    default: () => [],
  },
  importUrl: {
    type: String,
    default: "",
  },
});
const activeKey = ref(tab || props.tabList[0]["value"]);
// 加载组件
const loadModule = async (moduleName) => {
  const module = await import(`@/views/layer2subnet/components/${moduleName}.vue`);
  componentName.value = module.default;
};
// 处理方法
const tabChange = (val) => {
  loadModule(val);
  router.replace({
    path: route.fullPath,
    query: { ...route.query, tab: val },
  });
};
onMounted(() => {
  loadModule(activeKey.value);
});
</script>

<style lang="scss" scoped>
.badge_style {
  vertical-align: middle;
  margin-left: 8px;
}
:deep(.garco-dropdown-open .garco-icon-down) {
  transform: rotate(180deg);
}
</style>
